<#assign base=request.contextPath>
<!DOCTYPE html> 
<html>
	<head>
		<title>${title}</title>
		<meta charset="utf-8">
		<#include "common/reference.ftl" />
		<#include "common/am.reference.ftl" />
		<#include "common/breadcrumb.ftl">
		<link rel="stylesheet" href="${base}/resources/css/style.min862f.css" />
	</head>
	<body >
	    <div class="wrapper wrapper-content" style='background-color: #f3f3f4;'>
	        <div ><h2>${companyName}统计分析:</h2></div>
            <div class="row">
                <div class="col-sm-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-info pull-right" onclick="window.location.reload();">刷新</span>
                            <h5>司机数量</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="stat-percent font-bold text-info">
                                <big>本周新增：${countBean.driverday7}</big>
                            </div>
                            <div class="font-bold text-info">
                                <big>今日新增：${countBean.driverday1}</big>
                            </div>
                        </div>
                        <div style="background-color: #fff;padding: 2px 20px 20px;border-color: #e7eaec;-webkit-border-image: none;-o-border-image: none;">
                            <div class="stat-percent font-bold text-info">
                                <big>司机总数：${countBean.driverall}</big>
                            </div>
                            <div class="font-bold text-info">
                                <big>本月新增：${countBean.driverday30}</big>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-info pull-right" onclick="window.location.reload();">刷新</span>
                            <h5>车辆总数</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="stat-percent font-bold text-info">
                                <big>本周新增：${countBean.car7}</big>
                            </div>
                            <div class="font-bold text-info">
                                <big>今日新增：${countBean.car1}</big>
                            </div>
                        </div>
                        <div style="background-color: #fff;padding: 2px 20px 20px;border-color: #e7eaec;-webkit-border-image: none;-o-border-image: none;">
                            <div class="stat-percent font-bold text-info">
                                <big>车辆总数：${countBean.carall}</big>
                            </div>
                            <div class="font-bold text-info">
                                <big>本月新增：${countBean.car30}</big>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-info pull-right" onclick="window.location.reload();">刷新</span>
                            <h5>用户数</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="stat-percent font-bold text-info">
                                <big>本周新增：${countBean.user7}</big>
                            </div>
                            <div class="font-bold text-info">
                                <big>今日新增：${countBean.user1}</big>
                            </div>
                        </div>
                        <div style="background-color: #fff;padding: 2px 20px 20px;border-color: #e7eaec;-webkit-border-image: none;-o-border-image: none;">
                            <div class="stat-percent font-bold text-info">
                                <big>用户总数：${countBean.userall}</big>
                            </div>
                            <div class="font-bold text-info">
                                <big>本月新增：${countBean.user30}</big>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-info pull-right" onclick="window.location.reload();">刷新</span>
                            <h5>订单总数</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="stat-percent font-bold text-info">
                                <big>本周新增：${countBean.ordernum7}</big>
                            </div>
                            <div class="font-bold text-info">
                                <big>今日新增：${countBean.ordernum1}</big>
                            </div>
                        </div>
                        <div style="background-color: #fff;padding: 2px 20px 20px;border-color: #e7eaec;-webkit-border-image: none;-o-border-image: none;">
                            <div class="stat-percent font-bold text-info">
                                <big>订单总数：${countBean.ordernumall}</big>
                            </div>
                            <div class="font-bold text-info">
                                <big>本月新增：${countBean.ordernum30}</big>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-info pull-right" onclick="window.location.reload();">刷新</span>
                            <h5>总金额</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins">${countBean.payall}</h1>
                            <div class="stat-percent font-bold text-success"><i class="fa fa-area-chart"></i>
                            </div>
                            <small>收入流水合计</small>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-info pull-right" onclick="window.location.reload();">刷新</span>
                            <h5>本月流水</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins">${countBean.pay30}</h1>
                            <div class="stat-percent font-bold text-info"><i class="fa fa-bar-chart"></i>
                            </div>
                            <small>当前月份的收入流水</small>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-info pull-right" onclick="window.location.reload();">刷新</span>
                            <h5>本周流水</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins">${countBean.pay7}</h1>
                            <div class="stat-percent font-bold text-navy"><i class="fa fa-pie-chart"></i>
                            </div>
                            <small>当前周的收入流水</small>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-info pull-right" onclick="window.location.reload();">刷新</span>
                            <h5>今日流水</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins">${countBean.pay1}</h1>
                            <div class="stat-percent font-bold text-danger"><i class="fa fa-line-chart"></i>
                            </div>
                            <small>当天的收入流水</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <ul  class="nav nav-tabs" >
                        <li class="active">
                            <a href="#home" data-toggle="tab">
                                 资金流水统计
                            </a>
                        </li>
                        <li><a href="#order" data-toggle="tab">订单数量统计</a></li>
                        <li><a href="#ios" data-toggle="tab">用户数量统计</a></li>
                        <li><a href="#mail" data-toggle="tab">司机数量统计</a></li>
                    </ul>
                    <div class="ibox float-e-margins tab-content ">
                        <div id="home" class="ibox-content tab-pane fade in active" style="height: 500px;background-color:white;">
                            <div class="flot-chart">
                                <div id="payContainer" style="height: 450px;width: 100%;"></div>
                            </div>
                        </div>
                        <div id="order" class="ibox-content tab-pane fade in active" style="height: 500px;background-color:white;">
                            <div class="flot-chart">
                                <div id="orderContainer" style="height: 450px;width: 100%;"></div>
                            </div>
                        </div>
                        <div id="ios" class="ibox-content tab-pane fade in active" style="height: 500px;background-color:white;">
                            <div class="flot-chart">
                                <div id="userContainer" style="height: 450px;width: 100%;"></div>
                            </div>
                        </div>
                         <div id="mail" class="ibox-content tab-pane fade in active" style="height: 500px;background-color:white;">
                             <div class="flot-chart">
                                 <div id="driverContainer" style="height: 450px;width: 100%;"></div>
                             </div>
                         </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var payChart = echarts.init(document.getElementById('payContainer'));
            var orderChart = echarts.init(document.getElementById('orderContainer'));
            var userChart = echarts.init(document.getElementById('userContainer'));
            var driverChart = echarts.init(document.getElementById('driverContainer'));

            getTripCountData();
            getTripNumData();
            getUserNumData();
            getDriverNumData();

            function getTripCountData() {
                payChart.showLoading();
                $.ajax({
                    url:'${base}/trip/getTripCountData',
                    type:'GET',
                    dataType:'json',
                    success:function (rst) {
                        var data = [];
                        var category = [];
                        if(rst.code == 0 && rst.data){
                            var len = rst.data.length;
                            for(var i = 0; i < len; i++){
                                category.push(rst.data[i].name);
                                data.push({value:rst.data[i].value,name:rst.data[i].name});
                            }
                        }
                        payChart.setOption({
                            tooltip : {
                                trigger: 'axis',
                                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            title:{
                                text:'资金流水统计'
                            },
                            legend: {
                                data: category
                            },
                            itemStyle:{
                                color:'#83bff6'
                            },
                            xAxis: {
                                type: 'category',
                                data: category
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                data: data,
                                name: '金额(元)',
                                type: 'bar'
                            }]
                        })
                    },
                    complete:function () {
                        payChart.hideLoading();
                    }
                })
            }
            function getTripNumData() {
                orderChart.showLoading();
                $.ajax({
                    url:'${base}/trip/getTripNumData',
                    type:'GET',
                    dataType:'json',
                    success:function (rst) {
                        var data = [];
                        var category = [];
                        if(rst.code == 0 && rst.data){
                            var len = rst.data.length;
                            for(var i = 0; i < len; i++){
                                category.push(rst.data[i].name);
                                data.push({value:rst.data[i].value,name:rst.data[i].name});
                            }
                        }
                        orderChart.setOption({
                            tooltip : {
                                trigger: 'axis',
                                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            title:{
                                text:'订单数量统计'
                            },
                            legend: {
                                data: category
                            },
                            itemStyle:{
                                color:'#83bff6'
                            },
                            xAxis: {
                                type: 'category',
                                data: category
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                data: data,
                                name: '数量',
                                type: 'line'
                            }]
                        })
                    },
                    complete:function () {
                        orderChart.hideLoading();
                    }
                })
            }
            function getUserNumData() {
                userChart.showLoading();
                $.ajax({
                    url:'${base}/trip/getUserNumData',
                    type:'GET',
                    dataType:'json',
                    success:function (rst) {
                        var data = [];
                        var category = [];
                        if(rst.code == 0 && rst.data){
                            var len = rst.data.length;
                            for(var i = 0; i < len; i++){
                                category.push(rst.data[i].name);
                                data.push({value:rst.data[i].value,name:rst.data[i].name});
                            }
                        }
                        userChart.setOption({
                            tooltip : {
                                trigger: 'axis',
                                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            title:{
                                text:'用户数量统计'
                            },
                            legend: {
                                data: category
                            },
                            itemStyle:{
                                color:'#83bff6'
                            },
                            xAxis: {
                                type: 'category',
                                data: category
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                data: data,
                                name: '数量',
                                type: 'line'
                            }]
                        })
                    },
                    complete:function () {
                        userChart.hideLoading();
                    }
                })
            }
            function getDriverNumData() {
                driverChart.showLoading();
                $.ajax({
                    url:'${base}/trip/getDriverNumData',
                    type:'GET',
                    dataType:'json',
                    success:function (rst) {
                        var data = [];
                        var category = [];
                        if(rst.code == 0 && rst.data){
                            var len = rst.data.length;
                            for(var i = 0; i < len; i++){
                                category.push(rst.data[i].name);
                                data.push({value:rst.data[i].value,name:rst.data[i].name});
                            }
                        }
                        driverChart.setOption({
                            tooltip : {
                                trigger: 'axis',
                                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            title:{
                                text:'司机数量统计'
                            },
                            legend: {
                                data: category
                            },
                            itemStyle:{
                                color:'#83bff6'
                            },
                            xAxis: {
                                type: 'category',
                                data: category
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                data: data,
                                name: '数量',
                                type: 'line'
                            }]
                        })
                    },
                    complete:function () {
                        driverChart.hideLoading();
                    }
                })
            }
        </script>
	</body>
</html>